import PopconfirmButton from '@/components/BizButtons/PopconfirmButton';
import useActionControl from '@/hooks/useActionControl';
import SystemRoleEditModal from '@/pages/system/role/components/SystemRoleEditModal';
import ApiSystemRole from '@/services/system/ApiSystemRole';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-components';
import { Button, message, Tag } from 'antd';
import ButtonGroup from 'antd/es/button/button-group';

const SystemRoleIndex = () => {
  const actionControl = useActionControl({
    addAction: {
      onActionCall: (values) => ApiSystemRole.add(values),
    },
    editAction: {
      onModalOpen: (values) => ApiSystemRole.getByRoleId(values.roleId),
      onActionCall: (values) => ApiSystemRole.edit(values),
    },
  });

  return (
    <div>
      <ProTable
        {...actionControl.table}
        request={async (params) => {
          const response = await ApiSystemRole.list(params);
          return {
            data: response.rows,
            success: true,
            total: response.total,
          };
        }}
        toolBarRender={() => [
          <Button
            key={'add'}
            loading={actionControl.loading.value}
            type="primary"
            onClick={() => {
              actionControl.actions.openAddModal({ roleSort: 100 });
            }}
          >
            新增
          </Button>,
        ]}
        rowKey={'roleId'}
        columns={[
          { title: '角色编号', dataIndex: 'roleId' },
          { title: '角色名称', dataIndex: 'roleName', width: 150 },
          { title: '权限字符', dataIndex: 'roleKey', width: 150 },
          {
            title: '显示顺序',
            dataIndex: 'roleSort',
            width: 100,
            hideInSearch: true,
          },
          {
            title: '状态',
            dataIndex: 'status',
            hideInTable: true,
            valueEnum: {
              '0': '正常',
              '1': '停用',
            },
          },
          {
            title: '状态',
            dataIndex: 'status',
            hideInSearch: true,
            valueEnum: {
              '0': (
                <Tag
                  color={'green'}
                  className={'cursor-pointer'}
                  title={'点击切换状态'}
                >
                  正常
                </Tag>
              ),
              '1': (
                <Tag
                  color={'red'}
                  className={'cursor-pointer'}
                  title={'点击切换状态'}
                >
                  停用
                </Tag>
              ),
            },
            onCell: (record, index) => {
              return {
                onClick: () => {
                  console.log(record, index);
                  ApiSystemRole.changeStatus({
                    roleId: record.roleId,
                    status: record.status === '0' ? '1' : '0',
                  }).then(() => {
                    message.success('修改成功');
                    actionControl?.table.actionRef?.current?.reload();
                  });
                },
              };
            },
          },
          { title: '备注', dataIndex: 'remark', ellipsis: true },
          { title: '创建时间', dataIndex: 'createTime', hideInSearch: true },
          {
            title: '操作',
            hideInSearch: true,
            render: (text, record) => [
              <ButtonGroup key={'operations'}>
                <Button
                  key="edit"
                  icon={<EditOutlined />}
                  type={'link'}
                  onClick={() => {
                    actionControl.actions.openUpdateModal(record);
                  }}
                >
                  修改
                </Button>
                <PopconfirmButton
                  key={'delete'}
                  buttonText={'删除'}
                  title={'删除后不可恢复, 确认删除吗?'}
                  buttonProps={{
                    danger: true,
                    type: 'link',
                    icon: <DeleteOutlined />,
                  }}
                  onConfirm={async () => {
                    await ApiSystemRole.remove(record.roleId);
                    message.success('删除成功');
                    actionControl?.table.actionRef?.current?.reload();
                  }}
                />
              </ButtonGroup>,
            ],
          },
        ]}
      />
      <SystemRoleEditModal {...actionControl.editModal} />
    </div>
  );
};

export default SystemRoleIndex;
